<template>
  <div class="">
    <a-modal
      v-model:visible="dialogVisible"
      :title="dialogTitle"
      :modal-style="modalStyle"
      :body-style="bodyStyle"
      :mask-closable="false"
      @cancel="dialogCancel"
      @before-ok="dialogBeforeOk"
    >
      <a-tabs>
        <a-tab-pane v-for="item in traditionColors" :key="item.label" :title="item.label">
          <a-grid :cols="8" :colGap="12" :rowGap="16" class="grid-color">
            <a-grid-item v-for="color in item.data" :key="color.color">
              <div class="color-item" :style="{ backgroundColor: color.color }" @click="setColor(color.color)">
                <icon-check v-if="color.color === checkedColor" class="checked-color" />
              </div>
              <p class="text-center">{{ color.label }}</p>
            </a-grid-item>
          </a-grid>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  import colorJson from './color.json';

  const modalStyle = {
    width: '50%',
    height: '40%',
  };
  const bodyStyle = {
    height: 'calc(100% - 108px)',
    overflow: 'auto',
  };

  const dialogVisible = ref(false);
  const dialogTitle = ref();

  const checkedColor = ref('#B36D61');
  const traditionColors: any = colorJson;

  const fetchData = async () => {
    dialogVisible.value = true;
    dialogTitle.value = '中国传统颜色';
  };
  const setColor = (color: string) => {
    checkedColor.value = color;
  };

  const dialogCancel = () => {
    dialogVisible.value = false;
  };
  const dialogBeforeOk = (done: any) => {

  };

  // 暴露方法【给父级调用】
  defineExpose({
    fetchData,
  });
</script>

<style scoped lang="less">
  .grid-color .color-item {
    height: 36px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    border-radius: 2px;
  }
  .color-item .checked-color {
    color: #ffffff;
    font-size: 20px;
    height: 36px;
  }
  .grid-color .text-center {
    text-align: center;
    margin: 0;
  }
</style>
